<template>
  <div class="search-panel">
    <el-row class="m-header-searchbar">
      <el-col :span="3" class="left">
        <a href="#"><img src="//s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png" alt="美团"></a>
      </el-col>
      <el-col :span="15" class="center">
        <div class="wrapper">
          <el-input v-model="searchWord" placeholder="搜索商家或地点" @focus="focusInput" @blur="blurInput"
                    @input="input"></el-input>
          <el-button type="primary" icon="el-icon-search"></el-button>
          <dl class="hotPlace" v-if="isHotPlace">
            <dt>热门搜索</dt>
            <dd v-for="(item,index) in hotPlaceList" :key="index">
              <router-link :to="{name: 'goods',params:{name:item}}">{{item}}</router-link>
            </dd>

          </dl>
          <dl class="searchList" v-if="isSearchList">
            <dd v-for="(item,index) in searchList" :key="index">
              <router-link :to="{name: 'goods',params:{name:item}}">{{item}}</router-link>
            </dd>

          </dl>
        </div>
        <p class="suggest">
          <a href="#" v-for="(item, index) in suggestList" :key="index">{{item}}</a>

        </p>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import api from '../../api/index.js'

  export default {
    name: 'searchBar',
    data() {
      return {
        searchWord: '',
        isFocus: false,
        hotPlace: [],
        searchList: [],
        hotPlaceList: [],
        suggestList: []
      }
    },
    created() {
      api.searchHotWords().then(res => {
        console.log(res);
        this.hotPlaceList = res.data.data;
        this.suggestList = res.data.data;
      })
    },
    computed: {
      isHotPlace: function () {
        return this.isFocus && !this.searchWord
      },
      isSearchList: function () {
        return this.isFocus && this.searchWord
      }
    },

    methods: {
      focusInput() {
        this.isFocus = true
      },
      blurInput() {
        let self = this
        setTimeout(function () {
          self.isFocus = false
        }, 200)
      },
      input() {
        // console.log(this.searchWord);
        let val = this.searchWord;
        api.getSearchWords().then(res => {
          this.searchList = res.data.data.list.filter((item, index) => {
            return item.indexOf(val) > -1;
          });
        })

      }
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">

</style>
